<template>
  <div id="ystj-BottomMaterial">
    <div class="ystj-BottomMaterial-title">
      <div class="title-left"></div>
      <div>这里是标题</div>
    </div>
    <div class="ystj-BottomMaterial-center">
      <div class="chartsOption">
        <dv-scroll-board :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomPersonnel',
  data () {
    return {
      config: {}
    }
  },
  mounted () {
    this.getScrollboard()
  },
  methods: {
    getScrollboard () {
      this.config = {
        header: ['材料类别', '单位', '进厂量', '消耗量', '损耗率'],
        data: [
          ['钢筋', '万吨', '44', '333', '444'],
          ['水泥  ', '万吨', '123', '33', '11'],
          ['砂石', '万吨', '12', '2', '1'],
          ['砼', '万吨', '43', '33', '22'],
          ['钢筋', '万吨', '44', '333', '444'],
          ['水泥  ', '万吨', '123', '33', '2'],
          ['砂石', '万吨', '12', '2', '0'],
          ['砼', '万吨', '43', '33', '12']
        ],
        headerBGC: 'transparent',
        oddRowBGC: '#06266F',
        evenRowBGC: '#072256'
      }
    }
  }
}
</script>

<style  lang="less">
#ystj-BottomMaterial {
  width: 100%;
  height: 48%;
  box-sizing: border-box;
  border: 1px solid #005ebe;
  border-radius: 7px;
  box-shadow: -1px -2px 20px -7px rgba(255, 255, 255, 0.5) inset;

  opacity: 0.76;
    background-image: linear-gradient(90deg, #0e1451 0%, #151643 100%);
    border: 1px solid #5f72c2;
    box-shadow: inset 0 0 10px 0 #556ac3;
    border-radius: 6px;
    background: #09104a;
    overflow: hidden;
  .ystj-BottomMaterial-title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #005ebe;
    display: flex;
    flex-direction: initial;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    .title-left {
      width: 4px;
      height: 18px;
      background: rgba(67, 202, 255, 1);
      border-radius: 2px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
  .ystj-BottomMaterial-center {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    .chartsOption {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
